<template>
  <div class="container">
    <h1 class="page-title">商品管理</h1>

    <!-- 搜索栏 -->
    <div class="search-bar">
      <input
          v-model="searchQuery"
          type="text"
          class="search-input"
          placeholder="搜索商品名称"
      />
      <button class="button search-btn" @click="fetchProducts">搜索</button>
      <button class="button add-btn" @click="goToAddPage">新增商品</button>
    </div>

    <div class="filter-buttons">
      <button class="button history-btn" @click="fetchHistoryProducts">历史商品</button>
      <button class="button listed-btn" @click="fetchListedProducts">上架商品</button>
    </div>

    <!-- 商品列表 -->
    <div class="product-table-container">
      <table>
        <thead>
        <tr>
          <th>商品ID</th>
          <th>商品名称</th>
          <th>价格</th>
          <th>状态</th>
          <th>类别</th>
          <th>库存</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="product in products" :key="product.id">
          <td>{{ product.id }}</td>
          <td>{{ product.name }}</td>
          <td>{{ product.price }}</td>
          <td>{{ product.state === 1 ? '上架' : '冻结' }}</td>
          <td>{{ product.categoryName }}</td>
          <td>{{ product.stock }}</td>
          <td class="action-btns">
            <button class="button detail-btn" @click="viewProductDetail(product)">查看详情</button>
            <button class="button edit-btn" @click="editProduct(product)">编辑</button>
            <button class="button delete-btn" @click="deleteProduct(product.id)">删除</button>
            <button class="button freeze-btn" @click="freezeProduct(product.id)">冻结</button>
          </td>
        </tr>
        </tbody>
      </table>
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <button class="button page-btn" :disabled="pageNum <= 1" @click="changePage(pageNum - 1)">上一页</button>
      <span>第 {{ pageNum }} 页</span>
      <button class="button page-btn" @click="changePage(pageNum + 1)">下一页</button>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'; // 引入封装好的axios实例

export default {
  data() {
    return {
      products: [],
      searchQuery: "",
      pageNum: 1,
      pageSize: 10,
      total: 0,
    };
  },
  methods: {
    fetchProducts() {
      const params = {
        name: this.searchQuery,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      request.get("/product/selectPage", { params })
          .then((res) => {
            if (res.code === "200") {
              this.products = res.data.list;
              this.total = res.data.total;
            } else {
              alert(res.msg || "获取数据失败");
            }
          })
          .catch(() => alert("获取数据失败"));
    },
    deleteProduct(id) {
      if (confirm("确定删除该商品吗？")) {
        request.delete(`/product/delete/${id}`)
            .then(() => {
              alert("删除成功");
              this.fetchProducts();
            })
            .catch(() => alert("删除失败"));
      }
    },
    freezeProduct(id) {
      if (confirm("确定冻结该商品吗？")) {
        request.put(`/product/freezeById/${id}`)
            .then(() => {
              alert("冻结成功");
              this.fetchProducts();
            })
            .catch(() => alert("冻结失败"));
      }
    },
    fetchHistoryProducts() {
      request.get('/product/selectHistory')
          .then(res => {
            if (res.code === "200") {
              this.products = res.data;
            } else {
              alert(res.msg || "获取历史商品数据失败");
            }
          })
          .catch(() => alert("获取历史商品数据失败"));
    },
    fetchListedProducts() {
      request.get('/product/listedProduct')
          .then(res => {
            if (res.code === "200") {
              this.products = res.data;
            } else {
              alert(res.msg || "获取上架商品数据失败");
            }
          })
          .catch(() => alert("获取上架商品数据失败"));
    },
    goToAddPage() {
      this.$router.push("/products/add");
    },
    editProduct(product) {
      this.$router.push(`/products/edit/${product.id}`);
    },
    viewProductDetail(product) {
      this.$router.push(`/products/${product.id}`);
    },
    changePage(newPageNum) {
      this.pageNum = newPageNum;
      this.fetchProducts();
    },
  },
  mounted() {
    this.fetchProducts();
  },
};
</script>

<style scoped>
/* 主体样式 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
}

.page-title {
  font-size: 28px;
  color: #004f85;
  margin-bottom: 20px;
}

/* 搜索栏样式 */
.search-bar {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.search-input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 300px;
  font-size: 14px;
}

.button {
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

.search-btn {
  background-color: #004f85;
  color: #fff;
}

.add-btn {
  background-color: #2ecc71;
  color: #fff;
}

/* 商品列表样式 */
.product-table-container {
  margin-top: 20px;
  border-radius: 8px;
  overflow: hidden;
  background-color: #f9f9f9;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px 15px;
  text-align: center;
  border-bottom: 1px solid #ddd;
}

th {
  background-color: #004f85;
  color: white;
}

tbody tr:nth-child(odd) {
  background-color: #f1f1f1;
}

tbody tr:hover {
  background-color: #e0f7ff;
}

.action-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.button.edit-btn {
  background-color: #f39c12;
  color: #fff;
}

.button.delete-btn {
  background-color: #e74c3c;
  color: #fff;
}

.button.freeze-btn {
  background-color: #3498db;
  color: #fff;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  gap: 20px;
}

.page-btn {
  background-color: #004f85;
  color: white;
}

.page-btn:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}
</style>
